<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" class="user">
    <br>
    <input type="text" class="pwd">
    <br>
    <button>登陆</button>


    <script>

        // 之前存了数据   用户名是qq  密码是123

        const cookies = document.cookie;
        console.log(cookies);

        // 切割成数组   cookie的bug  自动生成多了一个空格
        let arr = cookies.split('; ');
        // 继续切割
        arr = arr.map(item => {
            const arr2 = item.split('=');
            return {
                name: arr2[0],
                content: arr2[1]
            }
        });

        console.log(arr);


        // 事件
        const oBtn = document.querySelector('button');
        const oUser = document.querySelector('.user');
        const oPwd = document.querySelector('.pwd');
        oBtn.onclick = function () {

            // 判断用户名是否存在
            const res = arr.find(item => item.name === 'username');
            console.log(res);
            if (res.content === oUser.value) {
                // 判断密码
                const res2 = arr.find(item => item.name === 'pwd');
                if (res2.content === oPwd.value) {
                    alert('ok')
                }
                else {
                    alert('密码错误')
                }
            }
            else {
                alert('用户名不存在')
            }
        }




    </script>

</body>

</html>